<!DOCTYPE html>
<html lang="en" xmlns:th=www.thymeleaf.org>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>新冠病毒确诊统计</title>
    <link rel="stylesheet" th:href="@{../css/layui.css}">
    <script type="text/javascript" th:src="@{../js/jquery-1.7.2.min.js}"></script>
    <script type="text/javascript" th:src="@{../js/layui.js}"></script>
</head>
<body>
<style>
    .layui-form-item {
        margin-top: 15px;
    }
    .layui-input-block{
        width: 300px;
        float: left;
        margin-left: 0;
    }
    a:active {
        color:#D200D2;
        background-color: red;
        text-decoration:none;
    }
    li.active a {
        color:red;
    }
    .layui-table {
        width: 1920px;
        background-color: #fff;
        color: #666;
    }
</style>
<div th:replace="~{commons/side::sidebar}"></div>

<div class="layui-body">
    <!-- 内容主体区域 -->
    <form class="layui-form" action="/Data/findByCountry" method="post">
        <div class="layui-form-item">
            <label class="layui-form-label">输入国家：</label>
            <div class="layui-input-block">
                <input type="text" name="countryname" required  lay-verify="required" placeholder="请输入国家" autocomplete="off" class="layui-input">
            </div>
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>

    <br><hr>
    <div class="layui-form">
        <table class="layui-table">
            <colgroup>
                <col width="150">
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th style="width: 220px;">国家/地区</th>
                <th style="width: 220px;">省份/州</th>
                <th style="width: 120px;">确诊人数</th>
                <th>新增人数</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="item:${allRegionsStats}">
                <td th:text="${item.country}"></td>
                <td th:text="${item.state}" ></td>
                <td th:text="${item.latestTotalCases}"></td>
                <td th:text="${item.diffFromPrevDay}"></td>
            </tr>
            </tbody>
        </table>
    </div>
    <div style="padding: 15px;"></div>
</div>
</body>
</html>